<template>
    <rx-dialog  @ok="cancel" @cancel="cancel">
    <div class="InAppAdd">
        <div class="InAppAdd-my-common">
            <div class="InAppAdd-my-common-head">{{i18n('list.myApp','我的常用应用')}}<span>{{i18n('list.clickMinus','点击右上角减号移除出我的常用应用列表')}}</span></div>
            <div class="InAppAdd-my-common-list">
                <div class="InAppAdd-my-common-list-common" :class="[obj.appType=='custom' && obj.type!='interior' ? 'InAppAdd-my-common-list-common-hover':'']" style="border:1px dashed #dedede" v-for="(obj,index) in inAppList" :key="index">
                    <rx-icon-show  v-if="obj.appType=='custom'" @click.stop="handAppDelete(obj)" class="InAppAdd-my-common-icon-delete" icon="iconoffline_fill"></rx-icon-show>
                    <div :style="{'background':JSON.parse(obj.icon).bgColor}" class="InAppAdd-my-common-list-common-icon">
                        <rx-icon-show size="30px" :type="getType(obj)" :icon="getIcon(obj)"></rx-icon-show>
                    </div>
                    <span class="InAppAdd-title">{{obj.name}}</span>
                </div>
            </div>
        </div>
        <div class="InAppAdd-all-common">
            <div class="InAppAdd-my-common-head">{{i18n('list.myAllApps','我的全部应用')}}<span>{{i18n('list.clickPlus','点击右上角的加号可以设为我的常用应用')}}</span></div>
            <div class="InAppAdd-my-common-list">
                <template v-for="(obj,index) in appAll" :key="index">
                    <div class="InAppAdd-my-common-list-common InAppAdd-my-common-list-common-all" v-if="appuserALL(obj)">
                        <rx-icon-show @click.once="addCommon(obj)" icon="iconaddition_fill"  class="InAppAdd-my-common-icon-delete InAppAdd-my-common-add"></rx-icon-show>
                        <div v-if="obj.icon" class="InAppAdd-my-common-list-common-icon" :style="{'background':obj.backColor}">
                            <rx-icon-show size="30px" :type="getType(obj)" :icon="getIcon(obj)"></rx-icon-show>
                        </div>
                        <span class="InAppAdd-title">{{$i18(obj.clientName)}}</span>
                    </div>
                </template>
            </div>
        </div>
    </div>
    </rx-dialog>
</template>

<script>
import {mapState} from 'pinia';
import useMain from "@/stores/useMain.js";
import InsAppCollectApi from "@/common/api/portal/insAppCollect.js";
import InsPortalDefApi from "@/common/api/portal/insPortalDef.js";
import {Util} from '@lowcode/jpaas-base-lib';
import SysAppApi from "../../../../common/api/system/sysApp";
export default {
    name: "InAppAdd",
    props:['appList','appType','colId'],
    data(){
        return{
            appAll:[],
            appUser:[],
            inAppList:[],
            menusList:[],
        }
    },
    computed: {
        ...mapState(useMain,['menus']),
    },
    created(){
        this.inAppList = this.appList;
        this.getSysApp()
    },
    methods:{
        i18n(name,text,key){
            return this.$ti18(name,text,"InAppAdd",key);
        },
        getSysApp(){
            SysAppApi.getMyAuthApp().then(res=>{
                this.menusList = res.data;
                this.init();
            })
        },
        init(){
            this.appUser = [];
            this.appAll = [];
            this.menusList.find(item=>{
                item.title=this.$i18(item.title);
                if(item.appType ==1){
                    this.appAll.push(item);
                }
            })
            this.inAppList.find(res=>{
                if (res.appType =='custom' && res.app){
                    this.appUser.push(JSON.parse(res.app).value)
                }
            })
        },
        appuserALL(obj){
            if(this.appUser.indexOf(obj.appId)>-1){
                return false
            }else {
                return true
            }
        },
        getIcon(item){
            let iconConfig = new Function('return ' +item.icon )();
            return iconConfig ? iconConfig.icon :"";
        },
        getType(item){
            let iconConfig = new Function('return ' +item.icon )();
            return iconConfig.type
        },
        //删除应用
        handAppDelete(commonApp){
            var self = this;
            this.$confirm({
                title: self.i18n('msa.deleteApp','是否删除应用'),
                okText: this.$ti18('rxForm.ackBtn','确认'),
                cancelText: this.$ti18('rxForm.cancelBtn','取消'),
                zIndex:99999,
                onOk(){
                    InsAppCollectApi.del({ids:commonApp.id}).then(res=>{
                        self.loadData();
                    })

                }
            });
        },
        //刷新应用
        loadData() {
            InsPortalDefApi.getDataByColId(this.colId).then(res => {
                this.inAppList = res;
                this.init();
            });
        },
        /**
         * 给全部应用添加到常用应用
         * @param value
         */
        addCommon(obj){
            //判断是否添加重复应用
            for(var i in this.appList){
                if(this.appList[i].name ==obj.title){
                    this.$message.info(this.i18n('msa.notAdd','请勿重复添加'));
                    return
                }
            }
            var icon_ = {}
            if(obj.icon){
                icon_ =JSON.parse(obj.icon);
                icon_['system'] ='custom';
                icon_['bgColor'] = obj.backColor
            }
            if(obj.type){
                icon_['type'] = obj.type;
            }
            var value ={
                icon:JSON.stringify(icon_),
                name:this.$i18(obj.clientName),
                app:JSON.stringify({text:this.$i18(obj.clientName),value:obj.appId}),
                sn:obj.sn || 1,
                appType: "custom",
                type:'interior'
            };
            var self = this;
            InsAppCollectApi.save(value).then(res=>{
                self.loadData();
            });
        },
        cancel() {
            Util.closeWindow(this, "cancel");
        }
    }
}
</script>

<style scoped>
.InAppAdd-my-common-list-common-all{
    background-color: #f8f8f8!important;
}
.InAppAdd-my-common-list-common-all:hover{
    background-color: #f0f2f5!important;
}
.InAppAdd-my-common-list-common-add i{
    margin-top: 45px;
}
.InAppAdd-my-common-list-common-add span{
    text-align: center;
    font-size: 14px;
    color: #626262;
}
.InAppAdd-my-common-list{
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
}
.InAppAdd-my-common-list-common:hover .InAppAdd-my-common-icon-delete{
    color: #e52727;
}
.InAppAdd-my-common-list-common:hover .InAppAdd-my-common-add{
    color:#4285f4!important;
}
.InAppAdd-my-common-list-common{
    position: relative;
    cursor: pointer;
    width: 130px;
    height: 130px;
    background-color: #ffffff;
    border-radius: 4px;
    margin-top: 20px;
    margin-right: 20px;
}
.InAppAdd-my-common-icon-delete{
    position: absolute;
    color: #c7c7c7;
    top: -9px;
    font-size: 15px;
    right: -7px;
}
.InAppAdd-my-common-list-common-icon{
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 68px;
    border-radius: 50%;
    background-image: linear-gradient(0deg,
    #2b76f3 0%,
    #6db6fb 100%);
    margin-top: 21px;
    margin-left: 34px;
}
.InAppAdd-my-common-list-common-icon span{
    color: white;
}
.InAppAdd{
    padding:0px 20px;
    width: 100%;
}
.InAppAdd-my-common-head{
    border-bottom: 1px solid #e8e8e8;
    margin-top: 10px;
    line-height: 50px;
    font-size: 15px;
    color: #333333;
}
.InAppAdd-my-common-head span{
    font-size: 12px;
    color: #909090;
    margin-left: 15px;
}
.InAppAdd-title{
    text-align: center;
    display: block;
    margin-top: 15px;
}
</style>
